<template>
	<view class="content">
		<z-paging ref="paging" :auto-hide-loading-after-first-loaded="false" safe-area-inset-bottom empty-view-img="/static/nodata1.png" :empty-view-img-style="{width:'410rpx',height:'278rpx',marginBottom:'50rpx'}" v-model="dataList" @query="getList"  @onRefresh="onRefresh">
		
			<!-- 其余收入明细 -->
			<view class="list">
				<view class="wrap" v-for="(item,index) in dataList" :key="index"  @tap="toUrl(`order_det?id=${item.order_id}`)">
					<view class="w-top flex-bt">
						<view class="flex" style="min-width: 1px;">
							<view class="p status flex-ct org" v-if="item.state == 0">
								待结算
							</view>
							<view class="p status flex-ct green" v-if="item.state == 1">
								已结算
							</view>
							<view class="p status flex-ct blue" v-if="item.state == 2">
								已取消
							</view>
						</view>
						<view class="h3">
							订单编号：{{item.order_sn}}
						</view>
					</view>
					<view class="des">
						<view class="money">
							订单金额  
							<text class="red price" style="margin-left: 16rpx;">
								¥{{item.total_money}}
							</text>
						</view>
						<view class="money">
							实收金额  
							<text class="red price" style="margin-left: 16rpx;">
								¥{{item.commiss_money}}
							</text>
						</view>
					</view>
					<view class="time flex-bt">
						<view class="em">
							时间
						</view>
						<view class="em">
							{{item.addtime}}
						</view>
					</view>
					
				</view>
			</view>
		
		</z-paging>
	</view>
</template>


<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	import {finance} from '@/config/user/api.js';
	export default {
		data() {
			return {
				loading:true,
				dataList:[],
				list: [],
				listTip: null,
			}
		},
		components: {
		},
		onLoad(o) {
			this.$list.init(this);
		},
		
		computed: {
			...mapState({
			    userInfo: 'userInfo',
			})
		},
		methods: {	
			// 跳转页面方法
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			async getList(pageNo,pageSize,onRefresh = false){
				const that = this;
				let paramData = {
					page: pageNo,
					page_size: 20,
				};
				const res = await finance(paramData);
				if (res.code != 1) {
					this.$common.showTip(res.msg, 'none')
					return
				}; 
				let list = res.data.data || [];
				if (list.length) {
					let setdata = that.$list.normalData(list, that);
					that.list = setdata.list;
					that.$refs.paging.complete(setdata.list);
				} else {
					that.$refs.paging.complete([]);
				};
			},	
			async onRefresh(){
			},
			...mapMutations(['setUserInfo','setAddressMsg','setNowHospital'])
		}
	}
</script>


<style lang="scss" scoped>
	.wrap{
		background: #fff;
		padding: 24rpx 32rpx;
		margin: 0 4%;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		.w{
			align-items: flex-start;
			color: #a1a1a1;
			font-size: $font-b;
			line-height: 1.6em;
			margin-bottom: 16rpx;
			.p:last-of-type{
				max-width: 70%;
				text-align: right;
			}
		}
		.price{
			font-size: 32rpx;
			font-weight: 600;
		}
		.des{
			color: #333;
			font-size: $font-b;
			padding: 30rpx 0;
			.money{
				margin: 10rpx 0;
			}
		}
		.time{
			font-size: $font-s;
			color: #999;
			border-top: 1px solid #eee;
			padding: 20rpx 0 0;
			
		}
		.h3{
			color: #333;
			font-size: 28rpx;
		}
		.status{
			padding: 0 14rpx;
			height: 56rpx;
			font-size: $font-s;
			border-radius: 8rpx;
			min-width: 120rpx;
			display: inline-flex;
			margin-right: 16rpx;
			&.red{
				color: #FF4747;
				background: #FFEDED;
			}
			&.blue{
				color: $blue;
				background: #EDF3FF;
			}
			&.green{
				color: #3DA895;
				background: #DEFFF7;
			}
			&.org{
				color: #f8613b;
				background: #fce3b6;
			}
		}
	}
	.list{
		padding: 20rpx 0;
	}
</style>